<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!-- 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用 -->
    <meta http-equiv="windows-Target" content="_top" />
    <title>{% block title %}{% endblock %}-博客</title>
    <!-- bootstrap5网址： https://getbootstrap.com/docs/5.3/examples/ -->
    <!-- jquery网址：https://jquery.com/ -->
    <!-- 富文本编辑器网址： https://wangeditor.com -->
    <!-- 代码高亮包网址：https://highlightjs.org/ -->

    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}" />
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/base.css' %}" />
    {% block head %}{% endblock %}
  </head>
  <body>
    <header class="p-3 text-bg-dark border-bottom mb-3">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="#"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <img src="{% static 'images/logo.jpg' %}" alt="" width="40" />
          </a>
          <ul
            class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
          >
            <li><a href="{% url 'myblog:index_blog' %}" class="nav-link px-2 text-white">首页</a></li>
            <li><a href="{% url 'myblog:pub_blog' %}" class="nav-link px-2 text-white">发布博客</a></li>
            <li><a href="#" class="nav-link px-2" style="color: rgb(186, 184, 184);">动态</a></li>
            <li><a href="#" class="nav-link px-2" style="color: rgb(186, 184, 184);">消息</a></li>
            <li><a href="#" class="nav-link px-2" style="color: rgb(186, 184, 184);">帮助</a></li>
            <li><a href="{% url 'myauth:my_info' %}" class="nav-link px-2 text-white">我的</a></li>
          </ul>
          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search" action="{% url 'myblog:search' %}" method="get">
            <input
              type="search"
              name="q"
              value="{{q}}"
              class="form-control"
              placeholder="搜索博客..."
              aria-label="Search"
            />
          </form>

          {% if user.is_authenticated %}
          <div class="dropdown text-end">
            <a
              href="#"
              class="d-block text-decoration-none dropdown-toggle btn btn-dark"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <img
                src="{% static 'images/avat.jpg' %}"
                alt="mdo"
                width="32"
                height="32"
                class="rounded-circle"
              />
              <span>{{user.username}}</span>
            </a>
            <ul class="dropdown-menu text-small dropdown-menu-dark">
              <li><a class="dropdown-item" href="{% url 'myauth:my_info' %}">个人中心</a></li>
              <li><hr class="dropdown-divider" style="border-color: white;" /></li>
              <li><a class="dropdown-item" href="{% url 'myauth:logout' %}">退出登录</a></li>
            </ul>
          </div>
          {% else %}
          <div class="text-end">
            <a
              href="{% url 'myauth:login' %}"
              type="button"
              class="btn btn-outline-light me-2"
            >
              登录
            </a>
            <a
              href="{% url 'myauth:register' %}"
              type="button"
              class="btn btn-warning"
              >注册</a
            >
          </div>
          {% endif %}
        </div>
      </div>
    </header>

    <main class="container bg-white p-3 mb-3 rounded">
      {% block main %}{% endblock %}
    </main>
  </body>
</html>
